<template>
  <!-- 根据性别筛选出毕业生占比 -->
  <div>
    <div class="echarts_cover">
      <!-- <h2 class="nav_title">可视化界面</h2> -->

      <!-- 第一张关于学历占比的可视化图表 -->
      <div class="center_cover">
        <!-- 第二张关于毕业生男女占比的图表 -->
        <div class="echarts1" id="main1"></div>
        <el-select
          v-model="work_xueli"
          placeholder="请选择学历"
          @change="hanleChange(work_xueli)"
        >
          <el-option label="不限学历" value="不限"></el-option>
          <el-option label="本科" value="本科"></el-option>
          <el-option label="研究生" value="研究生"></el-option>
          <el-option label="博士" value="博士"></el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
import { sendSexstract } from "@/api/data";
export default {
  data() {
    return {
      options1: [],
      dialogFormVisible: false,
      work_xueli: "",
      formLabelWidth: "120px",
      series: [],
    };
  },
  async mounted() {
    let datalist = sessionStorage.getItem("sendSexstract");
    if (datalist) {
      this.series = JSON.parse(datalist);
    } else {
      let data = await sendSexstract();
      this.series = data.data;
      sessionStorage.setItem("sendSexstract", JSON.stringify(data.data));
    }
    this.xuanran1();
  },
  methods: {
    // 用户选择了学历
    async hanleChange(val) {
      if (val != "不限") {
        let data = await sendSexstract({ work_xueli: this.work_xueli });
        this.series = data.data;
      } else {
        this.series = JSON.parse(sessionStorage.getItem("sendSexstract"));
      }
      this.xuanran1();
    },

    // 渲染第二张图表
    xuanran1() {
      let myChart = echarts.init(document.getElementById("main1"));
      let option = {
        title: {
          text: "毕业生男女人数",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["男", "女"],
        },
        toolbox: {
          show: true,
          orient: "vertical",
          left: "left",
          top: "center",
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: this.$store.getters.isShow },
          },
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            data: ["2016", "2017", "2018", "2019", "2020"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: this.series,
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts_cover {
  height: calc(100vh -120px);
  text-align: center;
  padding: 50px 20px;
  position: relative;
}

.center_cover {
  display: flex;
  justify-content: center;
}
.echarts1 {
  width: 700px;
  height: 400px;
  margin-left: 30px;
}

.btn1 {
  margin-left: 20px;
  // margin-top: 20px;
  height: 35px;
}

.el-select {
  margin-left: 20px;
  width: 130px !important;
}
</style>